<template>
  <div class="searched">
    <div style="border-bottom: 10px solid #f4f4f4;">
      <p class="searched_title">
        <slot name="searched_title">专栏</slot>
      </p>
      <ul>
        <li class="border-bottom" v-for="(item,key) in searchlist" :key="key" @click="godetali(item.vid,item.data_type)">
          <img :src="item.picture" alt="">
          <span class="searched_right">
              <span>{{item.title}}</span>
              <p>{{item.detail}}</p>
            </span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SearchedList',
  props: {
    searchlist: {}
  },
  methods: {
    godetali (vid, type) {
      if (type == 2) {
        this.$router.push({ name: 'detailofboom', path: '/detailofboom', query: { vid: vid } })
      }
      if (type == 1) {
        this.$router.push({ name: 'detailofvedio', path: '/detailofvedio', query: { vid: vid } })
      }
      if (type == 3) {
        this.$router.push({ name: 'detailofpic', path: '/detailofpic', query: { vid: vid } })
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .searched{
    width: 100%;
    .searched_title{
      margin: 10px 15px;
    }
    ul{
      margin-left: 15px;
      margin-right: 15px;
      padding-bottom: 10px;
      display: flex;
      flex-direction: column;
      li{
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 70px;
        img {
          height: 60px;
          width: 25%;
          border-radius: 5px;
          margin-top: 5px;
        }
        .searched_right{
          width: 75%;
          margin-left: 5px;
          height: 70px;
          span{
            width: 100%;
            font-size: 14px;
            line-height: 16px;
            margin-top: 5px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
          p{
            font-size: 13px;
            color: #acacac;
            margin-top: 10px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space:nowrap
          }
        }
      }
    }
  }
</style>
